class Button extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const content = this.props.content;

    //Build Each Button
    if (!isNaN(content)) {
      // Numbers
      return /*#__PURE__*/(
        React.createElement("div", {
          onClick: this.props.click,
          class: this.props.info[content][2],
          id: this.props.info[content][1] },

        content));


    } else {
      // Operators
      switch (content) {
        case "+":
          return /*#__PURE__*/(
            React.createElement("div", {
              onClick: this.props.click,
              class: this.props.info[10][2],
              id: this.props.info[10][1] },

            content));


          break;
        case "-":
          return /*#__PURE__*/(
            React.createElement("div", {
              onClick: this.props.click,
              class: this.props.info[11][2],
              id: this.props.info[11][1] },

            content));


          break;
        case "/":
          return /*#__PURE__*/(
            React.createElement("div", {
              onClick: this.props.click,
              class: this.props.info[12][2],
              id: this.props.info[12][1] },

            content));


          break;
        case "*":
          return /*#__PURE__*/(
            React.createElement("div", {
              onClick: this.props.click,
              class: this.props.info[13][2],
              id: this.props.info[13][1] },

            content));


          break;
        case "=":
          return /*#__PURE__*/(
            React.createElement("div", {
              onClick: this.props.click,
              class: this.props.info[14][2],
              id: this.props.info[14][1] },

            content));


          break;
        case "AC":
          return /*#__PURE__*/(
            React.createElement("div", {
              onClick: this.props.click,
              class: this.props.info[15][2],
              id: this.props.info[15][1] },

            content));


          break;
        case "%":
          return /*#__PURE__*/(
            React.createElement("div", {
              onClick: this.props.click,
              class: this.props.info[16][2],
              id: this.props.info[16][1] },

            content));


          break;
        case ".":
          return /*#__PURE__*/(
            React.createElement("div", {
              onClick: this.props.click,
              class: this.props.info[17][2],
              id: this.props.info[17][1] },

            content));


          break;
        default:
          console.log("error");}

    }
  }}


class MainComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      total: 0,
      current: "",
      expression: [] };


    this.operators = ["+", "-", "/", "*", "%"];
    this.numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

    // Info to build buttons
    this.array = [
    [0, "zero", "button"],
    [1, "one", "button"],
    [2, "two", "button"],
    [3, "three", "button"],
    [4, "four", "button"],
    [5, "five", "button"],
    [6, "six", "button"],
    [7, "seven", "button"],
    [8, "eight", "button"],
    [9, "nine", "button"],
    ["+", "add", "button actions"],
    ["-", "subtract", "button actions"],
    ["/", "divide", "button actions"],
    ["*", "multiply", "button actions"],
    ["=", "equals", "button enter"],
    ["AC", "clear", "button delete"],
    ["%", "resto", "button actions"],
    [".", "decimal", "button"]];


    // Functions
    this.handleClick = this.handleClick.bind(this);
    this.calculate = this.calculate.bind(this);
    this.clear = this.clear.bind(this);
    this.decimal = this.decimal.bind(this);
    this.clickOperators = this.clickOperators.bind(this);
    this.clickNumbers = this.clickNumbers.bind(this);
  }

  // Button Click
  handleClick(event) {
    //Get Button Value
    let action = event.target.innerHTML;

    // NUMBERS
    for (let i = 0; i < this.numbers.length; i++) {
      if (action == i) {
        this.clickNumbers(this.numbers[i]);
      }
    }

    // OPERATORS
    for (let i = 0; i < this.operators.length; i++) {
      if (action == this.operators[i]) {
        this.clickOperators(this.operators[i]);
      }
    }

    // DECIMAL
    if (action == ".") {
      this.decimal();
    }

    // CLEAR
    if (action == "AC") {
      this.clear();
    }

    //EQUAL
    if (action == "=") {
      this.calculate();
    }
  }

  //NUMBERS CLICKED
  clickNumbers(num) {
    // 1. Avoid Leading Zeros
    if (
    (this.state.current == "" || /^0*$/.test(this.state.current)) && // Regex to check if numbers has only zeros
    num == "0")
    {
      // DO NOTHING
    } else {
      document.getElementById("display").innerHTML = this.state.current + num; // Show typing number

      this.setState({
        //2. Push number to current string
        current: this.state.current + num });

    }
  }

  // DECIMAL CLICKED
  decimal() {
    if (this.state.current.indexOf(".") === -1) {
      //No decimal yet, add period
      this.setState({
        current: this.state.current + "." });

    } else {
      // Has decimal, add nothing
    }
  }

  // OPERATORS CLICKED
  clickOperators(op) {
    let newExpression = this.state.expression;

    //If there's a number, add to expression
    if (this.state.current != "") {
      newExpression.push(this.state.current);
    }

    //If expression is empty
    //Check if last char in expression is operator
    for (let i = 0; i < this.operators.length; i++) {
      if (
      this.state.expression[this.state.expression.length - 1] ==
      this.operators[i])
      {
        // Remove last char and push number and new operator
        newExpression.splice(-1, 1);
      }
    }
    // Push current number new Operator to the expression
    newExpression.push(op);

    this.setState({
      expression: newExpression,
      current: "" });

  }

  // AC BUTTON CLICKED
  clear() {
    this.setState({
      total: 0,
      current: "",
      expression: [] });

  }

  // EQUAL BUTTON CLICKED
  calculate() {
    let exp = this.state.expression;
    let result;

    // If exists, push last number
    if (this.state.current != "") {
      exp.push(this.state.current);
    }

    // If expression is empty, total = 0
    if (exp == []) {
      this.setState({
        total: 0 });

    }

    // If last char is operator, needs to be removed
    for (let i = 0; i < this.operators.length; i++) {
      if (exp[exp.length - 1] == this.operators[i]) {
        // Remove operator
        exp = this.state.expression.splice(-1, 1);
      }
    }

    // Calculate result
    result = eval(exp.join(""));

    // If number has decimal
    if (result.toString().indexOf(".") != -1) {
      let ndec = result.toString().split(".")[1].length;

      // If decimal has more than 4 decimal digits
      if (ndec > 4) {
        result = result.toFixed(4);
      }
    }

    // Set total
    this.setState({
      total: Number(result),
      current: result,
      expression: [] });

  }

  render() {
    let buttons = this.array.map(el => {
      return /*#__PURE__*/(
        React.createElement(Button, { info: this.array, click: this.handleClick, content: el[0] }));

    });

    //console.log(this.state.expression);

    return /*#__PURE__*/(
      React.createElement("div", { class: "content" }, /*#__PURE__*/
      React.createElement("div", { class: "display" }, /*#__PURE__*/
      React.createElement("div", { class: "display__highlight" }), /*#__PURE__*/
      React.createElement("div", { class: "display__screen" }, /*#__PURE__*/
      React.createElement("p", null, this.state.expression.join("")), /*#__PURE__*/
      React.createElement("span", { id: "display" }, this.state.total))), /*#__PURE__*/


      React.createElement("div", { class: "calculator" }, /*#__PURE__*/
      React.createElement("div", { class: "buttons" }, buttons))));



  }}


ReactDOM.render( /*#__PURE__*/React.createElement(MainComponent, null), document.querySelector(".wrapper"));